import type { IPoi, IPoiExt } from "@/common/MapTypes";
import createMarkerContent from "../markerIcon/markerIcon";
import moment from "moment";
import { unref, type Ref } from "vue";

export default function useMarker(
  mapInstenceRef: Ref<AMap.Map | null>,
  AMapFactoryRef: Ref<AMap.Map | null>
) {
  // UPDATE 更新 多点融合 AMap.MarkerCluster [https://lbs.amap.com/api/javascript-api-v2/documentation#markercluster]

  /**
   * 添加 marker 到 地图上
   * @param poi
   * @returns
   */
  function addMarkerToMap(poi: IPoiExt, options?: { onClick?: () => void }) {
    const unPoi = unref(poi);

    const lng = unPoi.longitude;
    const lat = unPoi.latitude;

    if (!lng && !lat) {
      uni.showModal({
        title: `${unPoi.name}的经纬度不存在，请选择其他`,
        icon: "none",
      });
      return;
    }

    if (!poi.extdata?.flag) {
      poi!.extdata.flag = true;
    }

    const marker = new AMap.Marker({
      position: new AMap.LngLat(lng, lat),
      content: createMarkerContent(unPoi, options),
      anchor: "bottom-center",
      title: moment().format("YYYY/M/D"),
      offset: new AMap.Pixel(0, 0), //设置点标记偏移量
      map: AMapFactoryRef.value!,
      label: {
        content:
          unPoi.name.length > 10 ? unPoi.name.slice(0, 10) + "..." : unPoi.name,
        offset: [0, 0],
        direction: "right",
      },
      /**
       * extData 高德地图API 规定的字段，用来存放 marker 的额外信息，不能改为 extdata。
       * 在 clearMarker 时，通过 extData.flag 来判断是否是用户添加的 marker，如果是，则不删除。
       */
      extData: {
        flag: true,
        data: unPoi,
      },
    });

    marker.setMap(mapInstenceRef.value);
  }

  /**
   * 删除地图山的 marker,
   * @param poi Marker 的信息
   * @param customize  是否是用户自定义的 marker，默认为 true，如果为 false，则删除 高德地图 渲染的 marker
   */
  function delMarkerFromMap(poi: IPoi, customize: boolean = true) {
    const allOverlays = mapInstenceRef.value?.getAllOverlays("marker");
    allOverlays?.forEach((item) => {
      if (
        item.getExtData().flag &&
        item.getExtData().data.id === poi.id &&
        customize
      ) {
        mapInstenceRef.value?.remove(item);
      } else if (
        !item.getExtData().flag &&
        !customize &&
        item._data.id === poi.id
      ) {
        mapInstenceRef.value?.remove(item);
      }
    });
  }

  /**
   * 清空地图上所有的 用户 marker
   */
  function clearMarkers() {
    const allOverlays = mapInstenceRef.value?.getAllOverlays("marker");
    allOverlays?.forEach((item) => {
      if (item.getExtData().flag) {
        mapInstenceRef.value?.remove(item);
      }
    });
  }

  return {
    addMarkerToMap,
    delMarkerFromMap,
    clearMarkers,
  };
}
